<template>
  <div class="container">
    <el-dialog
      :append-to-body="true"
      @close="handleClose"
      @open="open"
      title="设备信息"
      :visible.sync="addDeviceShow"
    >
      <el-form :rules="rules" ref="ruleForm" :model="form">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备ID :" :label-width="formLabelWidth" prop="deviceId">
              <el-input v-model="form.deviceId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码 :" :label-width="formLabelWidth" prop="sn">
              <el-input v-model="form.sn" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型 :" :label-width="formLabelWidth" prop="deviceType">
              <!-- <el-input v-model="form.deviceType" autocomplete="off"></el-input> -->
              <el-select style="width:100%;" v-model="form.deviceType" placeholder="请选择设备类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称 :" :label-width="formLabelWidth" prop="title">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格 :" :label-width="formLabelWidth" prop="spec">
              <!-- <el-input v-model="form.spec" autocomplete="off"></el-input> -->
              <el-select style="width:100%;" v-model="form.spec" placeholder="请选择设备类型">
                <el-option
                  v-for="item in specOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="采集器 :" :label-width="formLabelWidth" prop="region">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间 :" :label-width="formLabelWidth" prop="region">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间 :" :label-width="formLabelWidth" prop="region">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDeviceShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, getDictionaryList } from "@/api/device/device";
export default {
  props: ["addDeviceShow", "type", "deviceData"],
  name: "addDevice",
  data() {
    return {
      typeOptions: [],
      specOptions: [],
      form: {
        deviceId: "",
        sn: "",
        deviceType: "",
        title: "",
        spec: "",
      },
      formLabelWidth: "100px",
      rules: {
        deviceId: [
          { required: true, message: "请输入设备ID", trigger: "blur" },
        ],
        sn: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
        deviceType: [
          { required: true, message: "请输入设备编码", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
        spec: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {
    async getDictionaryList() {
      getDictionaryList("equipmenttype").then((res) => {
        this.typeOptions = res.data.data;
      });
      getDictionaryList("equipmentspec").then((res) => {
        this.specOptions = res.data.data;
      });
    },
    open() {
      console.log("open");
      if (this.type == "update") {
        this.form = this.deviceData;
      } else {
        this.form = {
          deviceId: "",
          sn: "",
          deviceType: "",
          title: "",
          spec: "",
        };
      }
      this.getDictionaryList();
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          add(this.form).then((res) => {
            console.log(res);
            this.form = {
              deviceId: "",
              sn: "",
              deviceType: "",
              title: "",
              spec: "",
            };
            this.addDeviceShow = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("update:addDeviceShow", false);
    },
  },
};
</script>

<style scoped lang='scss'></style>